<!-- 产品分类管理 -->
<template>
  <div class="">
    <el-main class="base_main_content">
      <div class="base_screen_header">
        <el-button @click="addCategory" type="primary">新增产品分类</el-button>
      </div>
      <DataCollectTable :data="data" :total="total" :config="tableConfig" @operationsHander="opHander.receive">
      </DataCollectTable>
    </el-main>
  </div>
</template>

<script setup>
import { $msg, $box } from "@ui/msg";
import DataCollectTable from "@com/table/DataCollectTable.vue";
import {
  OP_KEY,
  OPERATIONS,
  operationsHander,
} from "@com/table/tableOperations";
import { ref } from "vue";
import { TYPE, api } from "@api/category";
import useRoute from "@util/router";

const route = useRoute()

const total = ref(0)
const data = ref([])

function getOperations() {
  return [OPERATIONS.modify, OPERATIONS.del]
}

const tableConfig = {
  showIndex: true,
  operations: {
    label: "操作",
    width: 140,
    operations: getOperations,
  },
  column: [
    {
      label: "产品分类名称",
      prop: "catName",
    },
  ],
};

const opHander = operationsHander();
opHander.install(OP_KEY.modify, (data) => {
  $box.input("修改", '分类名称', data.catName, val => {
    api.updateCategory(data.id, val, () => {
      getList()
      $msg.succ("修改成功");
    })
  })
});

opHander.install(OP_KEY.delete, (data) => {
  $box.open("删除确认", `是否删除${data.catName}`, () => {
    api.delCategory(data.id, () => {
      getList()
      $msg.succ("删除成功");
    })
  });
});

function addCategory(data) {
  $box.input("添加", '分类名称', null, val => {
    api.addCategory(val, TYPE.travel, () => {
      getList()
      $msg.succ("添加成功");
    })
  })
}

function getList() {
  let routeQuery = route.query();
  api.getList({
      type: TYPE.travel,
      page: routeQuery.p,
      size: routeQuery.s,
    }, val => {
    data.value = val.itemList;
    total.value = val.total;
  })
}
getList()
</script>